<script>
import { defineComponent } from 'vue'
import * as echarts from 'echarts'



export default defineComponent({
  data() {
    return {
      kun: false,
    }
  },

  methods: {

    // echarts图表
    tu1() {
      // 绑定标签
      let chartDom1 = document.getElementById('chart');
      // 渲染图表
      let exist = echarts.getInstanceByDom(chartDom1)
      // 判断当前是否渲染过 避免下次重复渲染不出来 删除当前图表
      if (exist) {
        echarts.dispose(exist)
      }

      let myChart1 = echarts.init(chartDom1);
      let option;
      let xAxisData = [];
      let data1 = [];
      let data2 = [];
      for (let i = 0; i < 100; i++) {
        xAxisData.push('A' + i);
        data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
        data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
      }
      option = {
        title: {
          text: ''
        },
        legend: {
          data: ['bar', 'bar2']
        },
        toolbox: {
          // y: 'bottom',
          feature: {
            magicType: {
              type: ['stack']
            },
            dataView: {},
            saveAsImage: {
              pixelRatio: 2
            }
          }
        },
        tooltip: {},
        xAxis: {
          data: xAxisData,
          splitLine: {
            show: false
          }
        },
        yAxis: {},
        series: [
          {
            name: 'bar',
            type: 'bar',
            data: data1,
            emphasis: {
              focus: 'series'
            },
            animationDelay: function (idx) {
              return idx * 10;
            }
          },
          {
            name: 'bar2',
            type: 'bar',
            data: data2,
            emphasis: {
              focus: 'series'
            },
            animationDelay: function (idx) {
              return idx * 10 + 100;
            }
          }
        ],
        animationEasing: 'elasticOut',
        animationDelayUpdate: function (idx) {
          return idx * 5;
        }
      };

      option && myChart1.setOption(option);
    },
    tu2() {
      let chartDom2 = document.getElementById('chart1');
      let exist = echarts.getInstanceByDom(chartDom2)
      if (exist) {
        if (true) echarts.dispose(exist)
      }
      let myChart = echarts.init(chartDom2);
      let option;
      const data = [];
      for (let i = 0; i <= 100; i++) {
        let theta = (i / 100) * 360;
        let r = 5 * (1 + Math.sin((theta / 180) * Math.PI));
        data.push([r, theta]);
      }
      option = {
        title: {
          text: ''
        },
        legend: {
          data: ['line']
        },
        polar: {},
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        angleAxis: {
          type: 'value',
          startAngle: 0
        },
        radiusAxis: {},
        series: [
          {
            coordinateSystem: 'polar',
            name: 'line',
            type: 'line',
            data: data
          }
        ]
      };

      option && myChart.setOption(option);

    },
    tu3() {
      let chartDom3 = document.getElementById('chart2');
      let exist = echarts.getInstanceByDom(chartDom3)
      if (exist) {
        if (true) echarts.dispose(exist)
      }
      let myChart = echarts.init(chartDom3);
      let option;

      const data = [];
      for (let i = 0; i <= 360; i++) {
        let t = (i / 180) * Math.PI;
        let r = Math.sin(2 * t) * Math.cos(2 * t);
        data.push([r, i]);
      }
      option = {
        title: {
          text: ''
        },
        legend: {
          data: ['line']
        },
        polar: {
          center: ['50%', '54%']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        angleAxis: {
          type: 'value',
          startAngle: 0
        },
        radiusAxis: {
          min: 0
        },
        series: [
          {
            coordinateSystem: 'polar',
            name: 'line',
            type: 'line',
            showSymbol: false,
            data: data
          }
        ],
        animationDuration: 2000
      };

      option && myChart.setOption(option);
    },
    tu4() {
      let chartDom4 = document.getElementById('chart3');
      let exist = echarts.getInstanceByDom(chartDom4)
      if (exist) {
        if (true) echarts.dispose(exist)
      }
      let myChart = echarts.init(chartDom4);
      let option;

      option = {
        angleAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        radiusAxis: {},
        polar: {},
        series: [
          {
            type: 'bar',
            data: [1, 2, 3, 4, 3, 5, 1],
            coordinateSystem: 'polar',
            name: 'A',
            stack: 'a',
            emphasis: {
              focus: 'series'
            }
          },
          {
            type: 'bar',
            data: [2, 4, 6, 1, 3, 2, 1],
            coordinateSystem: 'polar',
            name: 'B',
            stack: 'a',
            emphasis: {
              focus: 'series'
            }
          },
          {
            type: 'bar',
            data: [1, 2, 3, 4, 1, 2, 5],
            coordinateSystem: 'polar',
            name: 'C',
            stack: 'a',
            emphasis: {
              focus: 'series'
            }
          }
        ],
        legend: {
          show: true,
          data: ['A', 'B', 'C']
        }
      };

      option && myChart.setOption(option);
    },
    ikun() {
      // 点击头像旋转效果
      this.kun = !this.kun


    },
    toggleSound() {
      let music = this.$refs.vd
      if (music.paused) {
        music.paused = false
        music.play()
      }
    }

  },
  mounted() {
    // 合适时机渲染图表
    this.tu1();
    this.tu2()
    this.tu3()
    this.tu4()
    window.onload = function () {
      setInterval(() => {
        toggleSound()
      }, 1)
    }
  },

})
</script>
<template >
  <div class="home">
    <ul>
      <li>
        <div class="header-body">
          <img src="http://43.143.0.76:5000/img/user.338ff8e8.svg" alt="" />
          <div>
            <span>访问量</span>
            <b class="abc">10086</b>
          </div>
        </div>

      </li>
      <li>
        <div class="header-body">
          <img src="http://43.143.0.76:5000/img/message.c960df02.svg" alt="" />
          <div>
            <span>信息</span>
            <b class="abc">11222</b>
          </div>
        </div>
      </li>
      <li>
        <div class="header-body">
          <img src="http://43.143.0.76:5000/img/monkey.478a4e88.svg" alt="" />
          <div>
            <span>收入</span>
            <b class="abc">99999</b>
          </div>
        </div>
      </li>
      <li>
        <div class="header-body">
          <img src="http://43.143.0.76:5000/img/shop.05588683.svg" alt="" />
          <div>
            <span>订单</span>
            <b class="abc">66666</b>
          </div>
        </div>
      </li>
    </ul>

    <article>
      <div class="left">
        <img
          src="https://ts2.cn.mm.bing.net/th?id=OIP-C.54izat7J0AC5Z3YADlaslwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
          alt="" :class="{ ikun: kun, }" @click="ikun" ref="kunkun">
        <h1>欢迎登录</h1>
        <!-- <audio controls loop autoplay ref="vd">
          <source src="../assets/zhiyin.mp3 " />
        </audio> -->

      </div>
      <div class="right" id="chart">

      </div>
    </article>
    <section>
      <div id="chart1"></div>
      <div id="chart3"></div>
      <div id="chart2"></div>
    </section>
    <div class="wrap">
      <div >
        <img
          src="https://tse4-mm.cn.bing.net/th/id/OIP-C.bBFw3yYkVgHbD_FyX4SVtQHaHj?w=202&h=206&c=7&r=0&o=5&dpr=1.3&pid=1.7"
          alt="">
      </div>
      <div >
        <img
          src="https://tse1-mm.cn.bing.net/th/id/OIP-C.DTQlxSGEdzqlAwaP4JBPZAHaLH?w=202&h=303&c=7&r=0&o=5&dpr=1.3&pid=1.7"
          alt="">
      </div>
      <div >
        <img
          src="https://tse1-mm.cn.bing.net/th/id/OIP-C.JcQJnqqtmcjFlVR8DkgDAAHaJg?w=202&h=260&c=7&r=0&o=5&dpr=1.3&pid=1.7"
          alt="">
      </div>
      <div >
        <img
          src="https://tse2-mm.cn.bing.net/th/id/OIP-C.eNnlcFDU0rojVawI-4F3NAHaJH?w=202&h=249&c=7&r=0&o=5&dpr=1.3&pid=1.7"
          alt="">
      </div>
      <div >
        <img
          src="https://tse1-mm.cn.bing.net/th/id/OIP-C.3a7yj3rghkDW9ifjzSvFuQHaLH?w=202&h=303&c=7&r=0&o=5&dpr=1.3&pid=1.7"
          alt="">
      </div>
      <div >
        <img
          src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Fg5laZ0yoMQBPwUnHugIlAHaLH?w=202&h=303&c=7&r=0&o=5&dpr=1.3&pid=1.7"
          alt="">
      </div>
      <div >
        <img
          src="https://tse4-mm.cn.bing.net/th/id/OIP-C.MW4fm94pSL69xnn_O8OCIwHaKE?w=202&h=275&c=7&r=0&o=5&dpr=1.3&pid=1.7"
          alt="">
      </div>
      <div >
        <img
          src="https://tse4-mm.cn.bing.net/th/id/OIP-C.w9g_YdagjJcrKMgEsTW1YAAAAA?w=202&h=303&c=7&r=0&o=5&dpr=1.3&pid=1.7"
          alt="">
      </div>
      <div >
        <img
          src="https://tse4-mm.cn.bing.net/th/id/OIP-C.l5NOhd1lmfGrYEKo-5Ll7AHaNC?w=202&h=327&c=7&r=0&o=5&dpr=1.3&pid=1.7"
          alt="">
      </div>

    </div>

  </div>
</template>
<style lang="scss" scoped>
audio{
  // display: none;
}
.home {
  height: 2000px;

  ul {
    height: 140px;
    // background-color: aliceblue;
    list-style: none;
    display: flex;
    margin-bottom: 80px;
    justify-content: space-between;
    padding: 0;

    li {
      width: 20%;
      height: 140px;
      background-color: aliceblue;
      border-radius: 10px;

      .header-body {
        height: 100%;
        width: 100%;
        border: 1px solid white;
        border-radius: 5px;
        background: white;
        display: flex;
        justify-content: space-around;
        align-items: center;

        img {
          height: 80px;
        }

        div {
          height: 60px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          span {
            color: #999;
          }

          b {
            font-size: 18px;
          }
        }
      }
    }
  }

  article {
    display: flex;
    justify-content: space-around;
  }

  .left {
    width: 30%;
    height: 400px;
    background-color: whitesmoke;
    border-radius: 10px;
    color: skyblue;

    img {
      border-radius: 50%;
      display: block;
      width: 200px;
      height: 200px;
      margin: 50px auto;
    }

    h1 {
      text-align: center;
      font-size: 30px;
    }

  }

  .right {
    width: 60%;
    height: 400px;
    background-color: rgb(255, 255, 255, );
    border-radius: 10px;

  }

  section {
    height: 400px;
    // background-color: blueviolet;
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
    margin-bottom: 30px;

    div {
      width: 30%;
      background-color: aliceblue;
      border-radius: 20px;
    }
  }

  .ikun {
    animation: kun 3s linear infinite;

  }

  @keyframes kun {
    to {
      transform: rotate(360deg);
    }

    from {
      transform: rotate(0deg);
    }
  }


  .wrap {
    width: 200px;
    margin: 200px auto 400px;
    position: relative;
    transform-style: preserve-3d;
    perspective: 3000px;

    /*最后才加上去*/
    animation: rotateView 10s 4s infinite alternate;
    img{
      width: 330px;
      height: 450px;
    }
  }

  /*最后才加上去*/
  @keyframes rotateView {
    from {
      transform: rotateY(0) rotateX(0);
    }

    to {
      transform: rotateY(-360deg) rotateX(-35deg)
    }
  }

  .wrap div {
    width: 200px;
    height: 300px;
    position: absolute;

    -webkit-box-reflect: below 10px -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  }

  /*第四个值为阴影的大小，越大，阴影就越大*/
  .wrap div img {
    transition: 0.5s;
    box-shadow: 0px 0px 10px 1px white
  }

  .wrap div:nth-child(9) {
    animation: has_rotate9 0.5s forwards;
  }

  @keyframes has_rotate9 {
    from {
      transform: rotateY(0deg) translateZ(0px);
    }

    to {
      transform: rotateY(400deg) translateZ(380px);
    }
  }

  .wrap div:nth-child(8) {
    animation: has_rotate8 0.5s 0.5s forwards;
  }

  @keyframes has_rotate8 {
    from {
      transform: rotateY(0deg) translateZ(0px);
    }

    to {
      transform: rotateY(440deg) translateZ(380px);
    }
  }

  .wrap div:nth-child(7) {
    animation: has_rotate7 0.5s 1s forwards;
  }

  @keyframes has_rotate7 {
    from {
      transform: rotateY(0deg) translateZ(0px);
    }

    to {
      transform: rotateY(480deg) translateZ(380px);
    }
  }

  .wrap div:nth-child(6) {
    animation: has_rotate6 0.5s 1.5s forwards;
  }

  @keyframes has_rotate6 {
    from {
      transform: rotateY(0deg) translateZ(0px);
    }

    to {
      transform: rotateY(520deg) translateZ(380px);
    }
  }

  .wrap div:nth-child(5) {
    animation: has_rotate5 0.5s 2s forwards;
  }

  @keyframes has_rotate5 {
    from {
      transform: rotateY(0deg) translateZ(0px);
    }

    to {
      transform: rotateY(560deg) translateZ(380px);
    }
  }

  .wrap div:nth-child(4) {
    animation: has_rotate4 0.5s 2.5s forwards;
  }

  @keyframes has_rotate4 {
    from {
      transform: rotateY(0deg) translateZ(0px);
    }

    to {
      transform: rotateY(600deg) translateZ(380px);
    }
  }

  .wrap div:nth-child(3) {
    animation: has_rotate3 0.5s 3s forwards;
  }

  @keyframes has_rotate3 {
    from {
      transform: rotateY(0deg) translateZ(0px);
    }

    to {
      transform: rotateY(640deg) translateZ(380px);
    }
  }

  .wrap div:nth-child(2) {
    animation: has_rotate2 0.5s 3.5s forwards;
  }

  @keyframes has_rotate2 {
    from {
      transform: rotateY(0deg) translateZ(0px);
    }

    to {
      transform: rotateY(680deg) translateZ(380px);
    }
  }

  .wrap div:nth-child(1) {
    animation: has_rotate1 0.5s 4s forwards;
  }

  @keyframes has_rotate1 {
    from {
      transform: rotateY(0deg) translateZ(0px);
    }

    to {
      transform: rotateY(720deg) translateZ(380px);
    }
  }

}</style>
